<!DOCTYPE html>
<html lang="cs">
    <head>
	    <meta charset="utf-8">
	    <title>Štatlař (API demo)</title>
	    
	    <style>
	        html, body {
	            font-family: sans-serif;
	        }
	        
	        h1 {
	            margin-bottom: 1em;
	        }
	        
	        #document {
	            width: 50%;
	        }
	    
	        form * {
	            line-height: 180%:
	            vertical-align: middle;
	        }
	    
	        form dt, form dd {
	            float: left;
	            display: block;
	            padding: 0.3em;
	        }
	        
	        form dt {
	            width: 6em;
	        }
	        
            form dt label {
                display: block;
	            padding: 0.3em;
	        }
	        
	        form dd input, form dd textarea, form dd select {
	            padding: 0.3em;       
	        }
	        
	        form dd textarea {
	            height: 5em;
	        }
	        
   	        form dt, form .submit-area {
	            clear: both;
	        }
	        
	        form .submit-area {
	            padding: 2em 0 3em 0;
	        }
	        
	        form .submit-area input {
	            padding: 0.5em;
	        }  
	        
	        #map-canvas {
	            position: absolute;
	            right: 0; top: 0;
	            width: 300px; height: 300px;
	        }
	    </style>
	    
	    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
	    <script src="http://maps.google.com/maps/api/js?sensor=false&language=cs&region=CZ"></script>
	    <script>
	        function init() {
                var brno = new google.maps.LatLng(49.2, 16.616667);

                return new google.maps.Map($('#map-canvas')[0], {
                    zoom: 13,
                    center: brno,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });
            }

            $(document).ready(function() {
                $('#map-canvas').css({
                    height: $(window).height(),
                    width: $(window).width() / 2
                });
            
                $('form').submit(function(e) {
                    var values = {};
                    $.each($(this).serializeArray(), function(index, item) {
                        values[item.name] = item.value;
                    });
                    
                    var xml = '<kml xmlns="http://www.opengis.net/kml/2.2"><Placemark><name>' + values.title + '</name><Snippet maxLines="1">' + values.type + '</Snippet><description><![CDATA[' + values.desc + ']]></description><Point><coordinates>' + values.coords + '</coordinates></Point></Placemark>﻿</kml>'
                    // window.alert(xml);
                    
                    $.ajax('./post-proxy.php', {
                        type: 'POST',
                        success: function(data, textStatus, jqXHR) { alert('Odeslání proběhlo v pořádku.'); /*window.location = window.location;*/ },
                        error: function(jqXHR, textStatus, errorThrown) { alert('Odeslání se nezdařilo: ' + errorThrown); },
                        contentType: 'text/xml',
                        data: xml
                    });
                    
                    e.preventDefault();
                });
            
                var marker = null;
                var map = init();
                google.maps.event.addListener(map, 'click', function(p) {
                    var lat = p.latLng.lat();
                    var lng = p.latLng.lng();
                
                    $('#coords').val(lng.toFixed(6) + ',' + lat.toFixed(6));
                    
                    if (marker) {
                        marker.setMap(null);
                    }
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(lat, lng),
                        map: map
                    });
                });
            });
	    </script>
    </head>
    <body>
        <div id="document">
            <h1>Štatlař (API demo)</h1>
            <form>
                <dl>
                    <dt><label for="title">Název:</label></dt>
                    <dd><input type="text" name="title" id="title" size="50"></dd>
                    
                    <dt><label for="title">Typ:</label></dt>
                    <dd><select name="type" id="type">
                        <option value="cave">jeskyně</option>
                        <option value="sewer">stoka</option>
                        <option value="basement">sklep</option>
                        <option value="abyss">propast</option>
                    </select></dd>

                    <dt><label for="desc">Popis:</label></dt>
                    <dd><textarea name="desc" id="desc" cols="50" rows="10"></textarea></dd>
                    
                    <dt><label for="coords">Umístění:</label></dt>
                    <dd>
                        <input type="text" name="coords" id="coords" size="25" readonly> <small>Klikni do mapy&hellip;</small>
                        <div id="map-canvas"></div>
                    </dd>
                </dl>
                
                <p class="submit-area">
                    <input type="submit" value="Přidat do databáze">
                </p>
            </form>
            <address><small>2011, Štatlař team &ndash; <a href="http://code.google.com/p/statlar">http://code.google.com/p/statlar</a></small></address>
        </div>
    </body>
</html>



